<div class="card">
  <div class="card-header d-flex justify-content-between">
    <h5 class="card-title mb-0">库存调拨管理</h5>
    <div class="d-flex align-items-center">
      
    </div>
  </div>

  <div class="card-body border-bottom">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <button class="btn btn-danger" (click)="deleteSelected()" [disabled]="selectedItems.length === 0">删除选中</button>
      </div>
      <div class="text-muted">
        已选择 {{ selectedItems.length }} 项
      </div>
    </div>
  </div>

  <div class="card-body">
    <div class="mb-3">
      <button class="btn btn-primary me-2" (click)="openCreateModal()">
        <i class="fa fa-plus me-1"></i>
        <span>新建</span>
      </button>
      <button class="btn btn-danger ms-2" (click)="deleteSelected()" [disabled]="selectedItems.length === 0">
        <i class="fa fa-trash me-1"></i>批量删除
      </button>
    </div>
    <div class="table-responsive">
      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <th>
              <input type="checkbox" 
                     [checked]="isAllSelected" 
                     (change)="selectAll($event.target.checked)"
                     [indeterminate]="selectedItems.length > 0 && selectedItems.length < inventoryTransfer.items.length">
            </th>
            <th>调拨单号</th>
            <th>调拨申请日期</th>
            <th>调拨类型</th>
            <th>调出仓库</th>
            <th>调入仓库</th>
            <th>调拨数量</th>
            <th>调拨金额</th>
            <th>调拨货品</th>
            <th>备注</th>
            <th>操作</th>
          </tr>
      </thead>
        <tbody>
          <tr *ngFor="let item of inventoryTransfer.items">
            <td>
              <input type="checkbox" 
                     [checked]="selectedItems.includes(item.id)"
                     (change)="toggleItemSelection(item.id)">
            </td>
            <td>{{ item.inventoryTransferNo }}</td>
            <td>{{ item.creationTime | date:'yyyy-MM-dd HH:mm' }}</td>
            <td>{{ item.inventoryTransferType }}</td>
            <td>{{ item.inventoryTransferOUT }}</td>
            <td>{{ item.inventoryTransferIN }}</td>
            <td>{{ item.totalQuantity }}</td>
            <td>{{ item.totalAmountSum | number:'1.2-2' }}</td>
            <td>{{ item.productNames }}</td>
            <td>{{ item.remarks }}</td>
            <td>
              <button class="btn btn-info btn-sm" (click)="goToDetail(item.id)">详情</button>
              <button class="btn btn-primary btn-sm" (click)="openEditModal(item.id)">编辑</button>
              <button class="btn btn-danger btn-sm" (click)="deleteInventoryTransfer(item.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="card-footer d-flex justify-content-between align-items-center">
    <div>
      <small>总计 {{ inventoryTransfer.totalCount }} 条记录</small>
    </div>
    
    <div *ngIf="maxPageCount > 1" class="d-flex align-items-center">
      <select class="form-select form-select-sm me-2" style="width: auto;" 
              [ngModel]="currentPageSize" 
              (ngModelChange)="onPageSizeChange($event)">
        <option *ngFor="let size of pageSizeOptions" [value]="size">{{ size }} 条/页</option>
      </select>

      <ul class="pagination mb-0">
        <li class="page-item" [class.disabled]="list.page === 1">
          <a class="page-link" href="javascript:void(0);" (click)="goToPage(list.page - 1)">&laquo;</a>
        </li>
        <ng-container *ngFor="let pageNum of visiblePageNumbers">
          <li *ngIf="pageNum !== -1" class="page-item" [class.active]="pageNum === list.page">
            <a class="page-link" href="javascript:void(0);" (click)="goToPage(pageNum)">{{ pageNum }}</a>
          </li>
          <li *ngIf="pageNum === -1" class="page-item disabled">
            <span class="page-link">...</span>
          </li>
        </ng-container>
        <li class="page-item" [class.disabled]="list.page === maxPageCount">
          <a class="page-link" href="javascript:void(0);" (click)="goToPage(list.page + 1)">&raquo;</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<!-- 新建/编辑库存调拨模态框 -->
<div class="modal fade" [class.show]="isModalOpen" [class.d-block]="isModalOpen" tabindex="-1" role="dialog" aria-modal="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{ isEditMode ? '编辑库存调拨' : '新建库存调拨' }}</h5>
        <button type="button" class="btn-close" (click)="closeModal()" aria-label="关闭"></button>
      </div>
      <div class="modal-body">
        <div class="card">
          <div class="card-header">
            <h5 class="card-title mb-0">基础信息</h5>
          </div>
          <div class="card-body">
            <form [formGroup]="createInventoryTransferForm">
              <div class="row mb-3">
                <div class="col-md-3">
                  <div class="form-group">
                    <label class="form-label">
                      调拨单号 <span class="text-danger">*</span>
                    </label>
                    <input type="text" class="form-control" formControlName="transferNo" placeholder="自动获取系统编号" readonly>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <label class="form-label">
                      调拨类型 <span class="text-danger">*</span>
                    </label>
                    <select class="form-select" formControlName="transferType">
                      <option value="">请选择</option>
                      <option *ngFor="let type of transferTypeOptions" [value]="type">{{type}}</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <label class="form-label"> 
                      调拨申请日期 <span class="text-danger">*</span>
                    </label>
                    <input type="date" class="form-control" formControlName="transferDate">
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <label class="form-label">
                      调出仓库 <span class="text-danger">*</span>
                    </label>
                    <div class="input-group">
                      <select class="form-select" formControlName="sourceWarehouse">
                        <option value="">请选择</option>
                        <option *ngFor="let warehouse of warehouseOptions" [value]="warehouse">
                          {{warehouse}}
                        </option>
                      </select>
                      <button class="btn btn-outline-secondary" type="button">设置</button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row mb-3">
                <div class="col-md-3">
                  <div class="form-group">
                    <label class="form-label">
                      调入仓库 <span class="text-danger">*</span>
                    </label>
                    <div class="input-group">
                      <select class="form-select" formControlName="targetWarehouse">
                        <option value="">请选择</option>
                        <option *ngFor="let warehouse of warehouseOptions" [value]="warehouse">
                          {{warehouse}}
                        </option>
                      </select>
                      <button class="btn btn-outline-secondary" type="button">设置</button>
                    </div>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group">
                    <label class="form-label">
                      经办人
                    </label>
                    <select class="form-select" formControlName="handler">
                      <option value="">请选择</option>
                      <option *ngFor="let handler of handlerOptions" [value]="handler">{{ handler }}</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label class="form-label">备注</label>
                    <textarea class="form-control" formControlName="remarks" rows="1" placeholder="请输入"></textarea>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>

        <div class="card mt-3">
          <div class="card-header">
            <h5 class="card-title mb-0">调拨明细</h5>
          </div>
          <div class="card-body">
            <div class="mb-3">
              <button class="btn btn-success me-2" (click)="openProductDialog()">
                <i class="fa fa-plus"></i> 添加
              </button>
              <button class="btn btn-danger" [disabled]="!selectedDetails.length" (click)="removeDetails()">
                <i class="fa fa-minus"></i> 移除
              </button>
            </div>
            
            <div class="table-responsive">
              <table class="table table-bordered table-hover">
                <thead>
                  <tr>
                    <th style="width: 40px;">
                      <input type="checkbox" [checked]="isAllDetailsSelected" (change)="toggleAllDetails($event)">
                    </th>
                    <th>序号</th>
                    <th>货品名称</th>
                    <th>货品编号</th>
                    <th>规格型号</th>
                    <th>单位</th>
                    <th>货品类型</th>
                    <th>调出仓库当前库存</th>
                    <th>调入仓库当前库存</th>
                    <th>调拨数量</th>
                    <th>入库单价</th>
                    <th>调拨金额</th>
                    <th>备注</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let detail of transferDetails; let i = index">
                    <td>
                      <input type="checkbox" [checked]="selectedDetails.includes(i)" (change)="toggleDetailSelection(i)">
                    </td>
                    <td>{{i + 1}}</td>
                    <td>{{detail.MerchandiseName}}</td>
                    <td>{{detail.MerchandiseNo}}</td>
                    <td>{{detail.MerchandiseModel}}</td>
                    <td>{{detail.MerchandiseUnit}}</td>
                    <td>{{detail.MerchandiseType}}</td>
                    <td>{{detail.MerchandiseOut}}</td>
                    <td>{{detail.MerchandiseIN}}</td>
                    <td>
                        <input type="number" class="form-control form-control-sm" 
                               [(ngModel)]="detail.MerchandiseNumber" 
                               (ngModelChange)="calculateDetailAmount(detail)"
                               min="0">
                    </td>
                    <td>{{detail.MerchandiseINPrice}}</td>
                    <td>{{detail.MerchandisePrice | number:'1.2-2'}}</td>
                    <td>{{detail.Reamres}}</td>
                    <td>
                        <button class="btn btn-sm btn-danger" (click)="removeDetail(i)">移除</button>
                    </td>
                  </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="9" class="text-end">合计：</td>
                        <td>调拨种类：{{ transferDetails.length || 0 }}</td>
                        <td>调拨数量：{{ getTotalQuantity() || 0 }}</td>
                        <td>调拨金额：{{ getTotalAmount() | number:'1.2-2' }}</td>
                        <td></td>
                    </tr>
                </tfoot>
              </table>
            </div>
          </div>
        </div>

  
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="closeModal()">取消</button>
        <button type="button" class="btn btn-primary" [disabled]="isSaving" (click)="save()">保存</button>
      </div>
    </div>
  </div>
</div>

<!-- 货品选择弹窗 -->
<div class="modal fade" [class.show]="showProductDialog" [class.d-block]="showProductDialog" tabindex="-1" role="dialog" aria-modal="true" *ngIf="showProductDialog">
  <div class="modal-dialog" style="max-width: 1000px; width: 1000px;">
    <div class="modal-content" style="border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.15);">
      <div class="modal-header">
        <h5 class="modal-title">选择货品</h5>
        <button type="button" class="btn-close" (click)="closeProductDialog()" aria-label="关闭"></button>
      </div>
      <div class="modal-body" style="max-height: 70vh; overflow-y: auto; padding: 24px;">
        <div *ngIf="isProductLoading" class="text-center text-secondary py-4">货品数据加载中...</div>
        <div class="table-responsive" *ngIf="!isProductLoading">
          <table class="table table-bordered table-hover">
            <thead>
              <tr>
                <th style="width: 40px;"><input type="checkbox" [(ngModel)]="isAllProductChecked" (change)="toggleAllProductChecked()"></th>
                <th>货物编号</th>
                <th>货物名称</th>
                <th>规格型号</th>
                <th>单位</th>
                <th>入库单价</th>
                <th>调出仓库当前库存</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let product of productList; let i = index">
                <td><input type="checkbox" [(ngModel)]="product.checked" (change)="onProductCheckedChange()"></td>
                <td>{{product.merchandiseNo}}</td>
                <td>{{product.merchandiseName}}</td>
                <td>{{product.merchandiseModel}}</td>
                <td>{{product.merchandiseUnit}}</td>
                <td>{{product.merchandiseINPrice}}</td>
                <td>{{product.merchandiseIN}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="closeProductDialog()">取消</button>
        <button type="button" class="btn btn-primary" (click)="confirmSelectProduct()">确定</button>
      </div>
    </div>
  </div>
</div> 